<template>
  <div>
    <!-- 搜索框 -->
    <el-form ref="form" :model="form" label-width="80px" class="inline-form">
      <el-form-item label="售后编号">
        <el-input v-model="form.aftersaleSn" placeholder="输入售后编号"></el-input>
      </el-form-item>
      <el-form-item label="订单ID">
        <el-input v-model="form.orderId" placeholder="输入订单ID"></el-input>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>查 找</el-button>
        <el-button type="primary" @click="handchu" icon="el-icon-download">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="operator-container">
      <button type="button" class="el-button filter-item el-button--success el-button--mini" @click="batchPass">
        <i class="el-icon-info"></i><span>批量通过</span></button>
      <button type="button" class="el-button filter-item el-button--danger el-button--mini" @click="batchReject">
        <i class="el-icon-delete"></i><span>批量拒绝</span></button>
    </div>
    <div class="el-tabs el-tabs--top">
      <div class="el-tabs__header is-top">
        <div class="el-tabs__nav-wrap is-top">
          <div class="el-tabs__nav-scroll">
            <div role="tablist" class="el-tabs__nav is-top" style="transform: translateX(0px);">
              <div class="el-tabs__active-bar is-top"
                :style="{ width: activeTabWidth + 'px', transform: 'translateX(' + activeTabPosition + 'px)' }"></div>
              <div id="tab-all" aria-controls="pane-all" role="tab" tabindex="0" class="el-tabs__item is-top"
                :class="{ 'is-active': activeTab === 'all' }" @click="setActiveTab('all')">
                全部
              </div>
              <div id="tab-uncheck" aria-controls="pane-uncheck" role="tab" tabindex="-1" class="el-tabs__item is-top"
                :class="{ 'is-active': activeTab === 'uncheck' }" @click="setActiveTab('uncheck')">
                待审核
              </div>
              <div id="tab-unrefund" aria-controls="pane-unrefund" role="tab" tabindex="-1" class="el-tabs__item is-top"
                :class="{ 'is-active': activeTab === 'unrefund' }" @click="setActiveTab('unrefund')">
                待退款
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="el-tabs__content">
        <div role="tabpanel" id="pane-all" aria-labelledby="tab-all" class="el-tab-pane" v-show="activeTab === 'all'">
        </div>
        <div role="tabpanel" id="pane-uncheck" aria-labelledby="tab-uncheck" class="el-tab-pane"
          v-show="activeTab === 'uncheck'"></div>
        <div role="tabpanel" id="pane-unrefund" aria-labelledby="tab-unrefund" class="el-tab-pane"
          v-show="activeTab === 'unrefund'"></div>
      </div>
    </div>
    <div>
      <div class="tab-content" style="margin-top: -10px;">
        <el-table :data="tableData" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="date" label="售后编号" min-width="100" align="center">
          </el-table-column>
          <el-table-column prop="name" label="订单ID" min-width="100" align="center">
          </el-table-column>
          <el-table-column prop="address" label="用户ID" min-width="180" align="center">
          </el-table-column>
          <el-table-column prop="address" label="售后类型" min-width="180" align="center">
          </el-table-column>
          <el-table-column prop="address" label="退款原因" min-width="180" align="center">
          </el-table-column>
          <el-table-column prop="address" label="退款价格" min-width="180" align="center">
          </el-table-column>
          <el-table-column prop="address" label="申请时间" min-width="180" align="center">
          </el-table-column>
          <el-table-column prop="address" label="操作" min-width="180" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { afterSaleList } from '@/api/afterSale'
import * as XLSX from "xlsx";
export default {
  data() {
    return {
      activeTab: 'all',
      activeTabWidth: 28,
      activeTabPosition: 0,
      tableData: [], // 修改初始值为数组
      form: {},
      loading: false,
      page: 1,
      limit: 20,
      status: '',
      multipleSelection: [] // 用于存储选中的行
    };
  },
  methods: {
    // 导出
    handchu() {
      let demo = [];
      for (let i = 0; i < this.tableData.length; i++) {
        // 根据实际数据结构调整属性名
        let obje = {
          售后编号: this.tableData[i].date,
          订单ID: this.tableData[i].name,
          用户ID: this.tableData[i].address,
          售后类型: this.tableData[i].address,
          退款原因: this.tableData[i].address,
          退款价格: this.tableData[i].address,
          申请时间: this.tableData[i].address,
        };
        demo.push(obje);
      }
      const worksheet = XLSX.utils.json_to_sheet(demo);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "data");
      XLSX.writeFile(workbook, "用户信息.xlsx");
    },
    // 查找
    onSubmit() {
      this.loading = true;
      afterSaleList({
        page: this.page,
        limit: this.limit,
        status: this.status,
        aftersaleSn: this.form.aftersaleSn,
        orderId: this.form.orderId
      }).then(res => {
        this.tableData = res.data.list;
        this.loading = false;
      }).catch(error => {
        console.error('请求出错:', error);
        this.loading = false;
      });
    },
    // 数据列表
    handleGetList() {
      this.loading = true;
      afterSaleList({
        page: this.page,
        limit: this.limit,
        status: this.status
      }).then(response => {
        this.tableData = response.data.list;
        this.loading = false;
      }).catch(error => {
        console.error('请求出错:', error);
        this.loading = false;
      });
    },
    // 样式切换
    setActiveTab(tab) {
      this.activeTab = tab;
      switch (tab) {
        case 'all':
          this.activeTabWidth = 28;
          this.activeTabPosition = 0;
          this.status = '';
          this.handleGetList();
          break;
        case 'uncheck':
          this.activeTabWidth = 60;
          this.activeTabPosition = 60;
          this.status = 1;
          this.handleGetList();
          break;
        case 'unrefund':
          this.activeTabWidth = 60;
          this.activeTabPosition = 142;
          this.status = 2;
          this.handleGetList();
          break;
      }
    },
    // 处理选中行的变化
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 批量通过
    batchPass() {
      if (this.multipleSelection.length === 0) {
        this.$message.error('请选择至少一条记录');
        return;
      }
    },
    // 批量拒绝
    batchReject() {
      if (this.multipleSelection.length === 0) {
        this.$message.error('请选择至少一条记录');
        return;
      }
    }
  },
  mounted() {
    this.handleGetList();
  },
};
</script>

<style lang="scss" scoped>
.operator-container {
  padding-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}

.el-tabs__item {
  cursor: pointer;
}

.el-tabs__item.is-active {
  font-weight: bold;
  color: #409EFF;
}

.inline-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inline-form .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-input__inner {
  width: 300px !important;
}
</style>